<template>
  <div class="app">
    <div class="btns">
           <span @click="rushBuy">正在抢购</span> <span @click="update">上新预告</span>
        </div>
        <div class="box">
             <div class="list" v-for="(item,index) in listArr " :key="index">
        <img :src="item.pic" alt="">
        <div>
            <p>{{item.address}}</p>
            <h3>{{item.name}}</h3>
            <div class="btn">
               <span> 爆爆团价：￥{{item.price}}</span> 
               <button @click="btn(item,index)">{{item.status}}</button>
            </div>
            <div class="num">
                <span>￥{{item.pri}}</span>
                <span>已售{{item.num}}件</span>
            </div>
        </div>
    </div>
        </div>
   
  </div>
</template>

<script>
export default {
    data(){
        return {
            listArr:[
                {pic:require("../assets/1.png"), address:"汉堡王│北美新天地餐厅",name:"买1送1明星皇堡|用心火烤肉质紧实鲜嫩多汁",price:25,pri:50,num:9029,status:"马上抢"},
                {pic:require("../assets/2.png"),address:"华策士·全鸡汉堡│长治路店",name:"华莱士│聚划算单人套餐│进店必选",price:12.12,pri:31,num:173,status:"马上抢"},
                {pic:require("../assets/3.png"),address:"贡天下山西特产│高新店",name:"白老大小米果仁酥220g【爆爆团】",price:35,pri:60,num:9099,status:"马上抢"},
            ],
            updateArr:[
            {pic:require("../assets/4.png"), address:"旺座现代城",name:"鲜嫩多汁烤肉饭肉粒饱满满50送25",price:15,pri:25,num:19956,status:"8:00上新"},
                {pic:require("../assets/5.png"),address:"土门|时代广场",name:"一只酸奶牛限时5折",price:5.12,pri:31,num:3373,status:"8:00上新"},
                {pic:require("../assets/1.png"),address:"立人科技|高新六路店",name:"肯德基超级嫩牛香辣堡套餐",price:20,pri:190,num:9099,status:"8:00上新"}
            ]
        }
    },
    methods:{
         btn(item,index){
        item.status="已抢"
    },
     update(){
        this.listArr=this.updateArr
    },
    rushBuy(){
        console.log("执行了")
        this.listArr=this.listArr
    }
    },
   
   
}
</script>

<style lang="scss" scoped>
.box{
    margin-bottom: 60px;
}
.list{
    display: flex;
    margin: 10px;
}
.list p{
    font-size: 12px;
    color: gray;
}
.list h3{
    font-size: 16px;
}
img{
    width: 90px;
    height:90px;
    margin-right: 10px;
}
.btn,.num{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
.btn span{
    display: inline-block;
    color: red;
}
.btn button{
   width: 70px;
   height: 30px;
   background-color: red;
   color: white;
   border: none;
   border-radius: 15px;
   
}
.num span:first-child{
color: grey;
font-size: 12px;
}
.num span:last-child{
    color: red;
    font-size: 12px;
}
.btns{
    width: 100%;
    background-color: orangered;
}
.btns span{
color: white;
margin-right: 30px;
font-size: 16px;
text-align: left;
}
</style>